<template>
  <div id="view-passage">
    <!-- 添加加载效果todo -->
    <div id="article" v-if="article != null && article.id">
      <el-row>
        <div id="cover" style="width: 100%; position: relative; height: 300px">
          <img
            :src="
              article.pic ||
              'https://cdn.jsdelivr.net/gh/xiaoliao111/sta-images@main/scenery/30c7cb19-7771-4e1e-9599-444510e2499e.jpg'
            "
            style="width: 100%; height: 100%"
          />
          <div
            class="passage-image"
            style="
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 30%;
              box-sizing: border-box;
              background-color: rgba(255, 255, 255, 0.85);
              padding: 10px;
            "
          >
            <el-row style="display: flex; gap: 50px">
              <span>更新时间：{{ article.updateTime || '暂无更新时间' }}</span>
              <span
                ><el-icon> <User /> </el-icon>作者:{{ article.authorName }}</span
              ></el-row
            >
            <el-row style="font-size: 35px">{{ article.title }}</el-row>
          </div>
        </div>
      </el-row>
      <el-row style="background-color: white">
        <el-col :xs="24" :md="18" style="background-color: white">
          <div class="bili-actions">
            <!-- 点赞按钮 -->
            <button class="action-btn" :class="{ active: liked }" @click="handleLike">
              <svg class="icon" viewBox="0 0 24 24" :fill="article.isLiked ? '#fb7299' : '#999'">
                <path
                  d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4
                 8 4 9.5 5 10 6.5 10.5 5 12 4 13.5 4 16 4 18 6
                 18 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                />
              </svg>
              <span>{{ article.isLiked ? '已点赞' : '点赞' }}</span>
            </button>

            <!-- 收藏按钮 -->
            <button class="action-btn" :class="{ active: favorited }" @click="handleFavorite">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                :fill="article.isCollected ? '#f9c74f' : '#999'"
              >
                <path
                  d="M12 17.27L18.18 21l-1.64-7.03L22 9.24
                 l-7.19-.61L12 2 9.19 8.63 2 9.24
                 l5.46 4.73L5.82 21z"
                />
              </svg>
              <span>{{ article.isCollected ? '已收藏' : '收藏' }}</span>
            </button>
          </div>
          <el-divider>
            <el-icon>
              <star-filled />
            </el-icon>
          </el-divider>
          <div class="box">
            <el-row style="display: flex; gap: 50px">
              <span class="infor" style="display: flex; align-items: center; flex-direction: row">
                <el-icon color="orange" size="30"> <Place /> </el-icon>目的地:
                {{ article.destination }}</span
              >
              <span class="infor" style="display: flex; align-items: center; flex-direction: row"
                ><el-icon color="green" size="30"> <Calendar /> </el-icon>天数:
                {{ article.durationsDays }}</span
              >
              <span class="infor" style="display: flex; align-items: center; flex-direction: row"
                ><el-icon color="skyblue" size="30"> <Timer /> </el-icon>时间:
                {{ article.departureDate }}</span
              >
              <span class="infor" style="display: flex; align-items: center; flex-direction: row"
                ><el-icon color="pink" size="30"> <Money /> </el-icon>人均:
                {{ article.costPerPerson }}</span
              >
            </el-row>
            <el-row style="margin-top: 20px">
              <span class="infor" style="display: flex; align-items: center; flex-direction: row"
                ><el-icon color="red" size="30"> <PriceTag /> </el-icon>标签：
                <span v-for="(tag, index) in article.tags" :key="index">{{ tag }}</span>
              </span>
            </el-row>
          </div>
          <el-divider>
            <el-icon>
              <star-filled />
            </el-icon>
          </el-divider>
          <div class="box">
            <el-row
              ><span>发表于{{ article.createTime }}</span></el-row
            >
            <el-row>
              <view-markdown :content="article.content"></view-markdown>
            </el-row>
          </div>
          <el-divider border-style="double" />
          <div class="box" style="margin-top: 10px">
            <comment-section :articleId="props.articleId"></comment-section>
          </div>
        </el-col>
        <el-col :xs="24" :md="6">
          <div class="other-box">作者信息</div>
          <div class="other-box">目录信息</div>
          <div class="other-box">相关推荐</div>
        </el-col>
      </el-row>
      <el-row></el-row>
    </div>
    <div v-else>
      <el-empty :image-size="200" description="暂无该文章信息" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { useArticleManageStore } from '@/stores/useArticleManageStore'
import type { ArticleDetail } from '@/utils/dataType/ArticleModel'
import { putCollectPassage, putLikePassage } from '@/services/api/passage.ts'
import { ElMessage } from 'element-plus'

const props = defineProps({
  articleId: {
    type: Number,
    required: true,
  },
})
const useArticleManage = useArticleManageStore()

onBeforeMount(async () => {
  try {
    const res = await useArticleManage.fetchArticle(props.articleId)
    // article.value = await useArticleManage.fetchArticle(props.articleId)
    article.value = res
  } catch (error) {
    console.error('[查询文章]:失败', error)
  }
})
const article = ref<ArticleDetail>({})

const handleLike = async () => {
  try {
    const res = await putLikePassage({ articleId: props.articleId })
    article.value.isLiked = !article.value.isLiked
    ElMessage.success('操作成功')
  } catch (error) {
    console.error('[点赞文章]:失败', error)
  }
  // const res = await putLikePassage({ articleId: props.articleId })
  // if (res.status == 200 && res.data.code == 1) {
  //   article.value.isLiked = !article.value.isLiked
  //   ElMessage.success('操作成功')
  // } else {
  //   ElMessage.error('出错了' + res.data.msg)
  // }
}
const handleFavorite = async () => {
  try {
    const res = await putCollectPassage({ articleId: props.articleId })
    article.value.isCollected = !article.value.isCollected
    ElMessage.success('操作成功')
  } catch (error) {
    console.error('[收藏文章]:失败', error)
  }
  // const res = await putCollectPassage({ articleId: props.articleId })
  // if (res.status == 200 && res.data.code == 1) {
  //   article.value.isCollected = !article.value.isCollected
  //   ElMessage.success('操作成功')
  // } else {
  //   ElMessage.error('出错了' + res.data.msg)
  // }
}
</script>

<style>
#view-passage {
  width: 85%;
  margin: 20px auto;
}

.box {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
}

span.info {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.other-box {
  width: 90%;
  background-color: aqua;
  margin: 20px auto;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

/*按钮*/
.bili-actions {
  display: flex;
  gap: 24px;
}

.action-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  padding: 4px 8px;
  transition: transform 0.15s ease;
}

.action-btn .icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  transition: transform 0.2s ease;
}

.action-btn:hover {
  transform: scale(1.05);
}

.action-btn.active span {
  color: #000;
  font-weight: bold;
}

.action-btn.active .icon {
  transform: scale(1.2);
}
</style>
